import React, { Component } from 'react';
import {
	StyleSheet, Text, View, TouchableOpacity, PixelRatio
} from "react-native";
import { GLOBAL } from '../../../../../config/global';
import MethodUtil from '../../../../../utils/MethodUtil';
import Utils from '../../../../../utils/utils';
import { creditType } from '../../../../../config/definition';
import { style } from '../../../../../theme/style';

const scale = GLOBAL.SCALE;
export class ZxycApproveItem extends Component {
	constructor(props) {
		super(props);
	}

	render() {
		const { itemInfo, dictKey, goDetail, choice, approveType } = this.props;
		const { creditApplyVO, taskId, taskName, taskDefinitionKey, formKey, createByName, changeId, createTime, subjectRemark } = itemInfo;
		const { creditApplyCode, creditApplyId, companyName } = creditApplyVO || {};
		return (
			<TouchableOpacity key={creditApplyCode + companyName} activeOpacity={.5} style={styles.orderCell}
				onPress={() => {
					goDetail({
						creditApplyId,
						taskName,
						taskId,
						taskDefinitionKey,
						formKey,
						resUrl: 'ChangeDetailZXYPage',
						approveType: approveType
					}, '新油变更')
				}}>
				<View style={styles.order}>
					<View style={{ flexDirection: 'row', alignItems: 'center' }}>
						<View style={styles.orderCol}>
							<Text style={styles.orderText}>审批编号: </Text>
							<Text style={styles.orderVal}>{changeId}</Text>
						</View>
						<Text style={styles.orderText}>
							{
								companyName ? (
									companyName.length > 10 ? (companyName.substr(0, 10) + '...') : companyName
								) : null
							}
						</Text>
					</View>
					<View style={styles.orderMain}>
						<View style={styles.orderCol}>
							<Text style={styles.orderText}>申请人: </Text>
							<Text style={styles.orderVal}>
								{
									createByName ? (
										createByName.length > 8 ? (createByName.substr(0, 8) + '...') : createByName
									) : null
								}
							</Text>
						</View>
						<View style={styles.orderCol}>
							<Text style={styles.orderText}>申请时间: </Text>
							<Text style={styles.orderVal}>{Utils.isEmpty(createTime) ? '-' : createTime.substring(0, 16)}</Text>
						</View>
						<View style={[styles.orderColActive]}>
							<Text style={styles.orderText}>变更类型: </Text>
							<Text style={styles.orderVal}>{subjectRemark || '-'}</Text>
						</View>
					</View>
				</View>
			</TouchableOpacity>
		)
	}
}

const styles = StyleSheet.create({
	orderCell: {
		width: 375 * scale,
		backgroundColor: '#fff',
		alignItems: 'center',
		marginBottom: 12 * scale,
	},
	order: {
		width: 351 * scale,
	},
	orderMain: {
		flexDirection: 'row',
		paddingTop: 8 * scale,
		paddingBottom: 8 * scale,
		flexWrap: 'wrap'
	},
	orderCol: {
		flexDirection: 'row',
		alignItems: 'center',
		height: 25 * scale,
		width: 175.5 * scale,
	},
	orderColActive: {
		flexDirection: 'row',
		width: 250 * scale,
	},
	orderText: {
		fontSize: 12 * scale,
		color: '#8B8B8B'
	},
	orderVal: {
		fontSize: 12 * scale,
		color: '#000'
	},
	flexOrder: {
		flexDirection: 'row',
		width: 308 * scale,
	},
	orderName: {
		fontSize: 12 * scale,
		color: '#8B8B8B'
	},
	orderTitle: {
		flexDirection: 'row',
		paddingRight: 15 * scale,
		fontSize: 12 * scale,
	},
})